const form = document.querySelector('form')
const nameInp = document.querySelector('.username')
const pwdInp = document.querySelector('.password')
const errBox = document.querySelector('.err')

// 1. 给 form 标签注册一个表单提交事件
form.addEventListener('submit', e => {
  // 处理事件对象兼容
    e = e || window.event
  // 1-2. 阻止默认行为
  //      阻止表单的自动提交行为, 因为我需要进行表单验证和使用 ajax 提交
    try { e.preventDefault() } catch(err) { e.returnValue = false }

  // 1-3. 采集用户信息(拿到用户填写的用户名和密码)
    const name = nameInp.value
    const pwd = pwdInp.value

  // 1-4. 非空验证
  // alert 会执行的时候, !name 或者 !pwd 有任意一个为 true
  // !name 为 true, 那么 name 本身就得是 false
  // 字符串内, 只有 '' 是 false, 只要你写了内容就是 true
    if (!name || !pwd) return alert('请完整填写表单')

  // 1-5. 提交到服务器
  // 按照登录的接口来进行书写
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://localhost:8888/users/login')
    xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)

    // 需要根据 res 内的信息进行判断
    loginHandler(res)
    }

  // POST 请求, 并且携带了参数, 需要提前设置请求头内的数据格式信息
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

  // POST 请求, 在 send 后面的小括号内携带参数
    xhr.send(`username=${ name }&password=${ pwd }`)
})


// 登录后的逻辑处理函数
function loginHandler(res) {
  // 判断登录成功与否
    if (res.code === 0) {
    // 登录失败
    // 提示用户错误
    errBox.style.display = 'block'
    }

    if (res.code === 1) {
    // 登录成功
    // 跳转页面
    // console.log('我该跳转页面了')

    // 做一些事情了
    // 标注一下你登录过
    // 需要向 localStorage 内存储一些内容
    // 需要把 token 和 用户 id 存储在 localStorage 内
    window.localStorage.setItem('token', res.token)
    window.localStorage.setItem('id', res.user.id)

    // 跳转页面了
    window.location.href = './index.html'
    }
}
